<script>
    var options = {
        chart: {
            height: 400,
            type: "heatmap",
            toolbar: {
                show: false,
            },
        },
        dataLabels: {
            enabled: false
        },
        colors: ["#206bc4",],
        series: [
            {
                name: "Jan",
                data: [{x: '1', y: 23}, {x: '2', y: 14}, {x: '3', y: 24}, {x: '4', y: 90}, {x: '5', y: 99}, {
                    x: '6',
                    y: 28
                }, {x: '7', y: 51}, {x: '8', y: 51}, {x: '9', y: 98}, {x: '10', y: 61}, {x: '11', y: 14}, {
                    x: '12',
                    y: 51
                }, {x: '13', y: 32}, {x: '14', y: 84}, {x: '15', y: 9}, {x: '16', y: 2},]
            },
            {
                name: "Feb",
                data: [{x: '1', y: 82}, {x: '2', y: 87}, {x: '3', y: 48}, {x: '4', y: 15}, {x: '5', y: 21}, {
                    x: '6',
                    y: 23
                }, {x: '7', y: 80}, {x: '8', y: 34}, {x: '9', y: 46}, {x: '10', y: 8}, {x: '11', y: 87}, {
                    x: '12',
                    y: 80
                }, {x: '13', y: 23}, {x: '14', y: 81}, {x: '15', y: 24}, {x: '16', y: 51},]
            },
            {
                name: "Mar",
                data: [{x: '1', y: 100}, {x: '2', y: 52}, {x: '3', y: 57}, {x: '4', y: 80}, {x: '5', y: 14}, {
                    x: '6',
                    y: 82
                }, {x: '7', y: 78}, {x: '8', y: 16}, {x: '9', y: 29}, {x: '10', y: 97}, {x: '11', y: 52}, {
                    x: '12',
                    y: 78
                }, {x: '13', y: 47}, {x: '14', y: 10}, {x: '15', y: 61}, {x: '16', y: 34},]
            },
            {
                name: "Apr",
                data: [{x: '1', y: 60}, {x: '2', y: 33}, {x: '3', y: 42}, {x: '4', y: 20}, {x: '5', y: 87}, {
                    x: '6',
                    y: 100
                }, {x: '7', y: 100}, {x: '8', y: 16}, {x: '9', y: 57}, {x: '10', y: 80}, {x: '11', y: 33}, {
                    x: '12',
                    y: 100
                }, {x: '13', y: 6}, {x: '14', y: 51}, {x: '15', y: 35}, {x: '16', y: 16},]
            },
            {
                name: "May",
                data: [{x: '1', y: 91}, {x: '2', y: 81}, {x: '3', y: 54}, {x: '4', y: 98}, {x: '5', y: 52}, {
                    x: '6',
                    y: 60
                }, {x: '7', y: 61}, {x: '8', y: 99}, {x: '9', y: 91}, {x: '10', y: 36}, {x: '11', y: 81}, {
                    x: '12',
                    y: 61
                }, {x: '13', y: 99}, {x: '14', y: 80}, {x: '15', y: 72}, {x: '16', y: 16},]
            },
            {
                name: "Jun",
                data: [{x: '1', y: 77}, {x: '2', y: 99}, {x: '3', y: 64}, {x: '4', y: 0}, {x: '5', y: 33}, {
                    x: '6',
                    y: 91
                }, {x: '7', y: 7}, {x: '8', y: 51}, {x: '9', y: 3}, {x: '10', y: 28}, {x: '11', y: 99}, {
                    x: '12',
                    y: 7
                }, {x: '13', y: 21}, {x: '14', y: 78}, {x: '15', y: 19}, {x: '16', y: 99},]
            },
            {
                name: "Jul",
                data: [{x: '1', y: 67}, {x: '2', y: 84}, {x: '3', y: 90}, {x: '4', y: 4}, {x: '5', y: 81}, {
                    x: '6',
                    y: 77
                }, {x: '7', y: 3}, {x: '8', y: 39}, {x: '9', y: 24}, {x: '10', y: 23}, {x: '11', y: 84}, {
                    x: '12',
                    y: 3
                }, {x: '13', y: 14}, {x: '14', y: 100}, {x: '15', y: 98}, {x: '16', y: 51},]
            },
            {
                name: "Aug",
                data: [{x: '1', y: 56}, {x: '2', y: 81}, {x: '3', y: 45}, {x: '4', y: 37}, {x: '5', y: 99}, {
                    x: '6',
                    y: 67
                }, {x: '7', y: 9}, {x: '8', y: 90}, {x: '9', y: 48}, {x: '10', y: 82}, {x: '11', y: 81}, {
                    x: '12',
                    y: 9
                }, {x: '13', y: 87}, {x: '14', y: 61}, {x: '15', y: 32}, {x: '16', y: 39},]
            },
            {
                name: "Sep",
                data: [{x: '1', y: 17}, {x: '2', y: 10}, {x: '3', y: 59}, {x: '4', y: 67}, {x: '5', y: 84}, {
                    x: '6',
                    y: 56
                }, {x: '7', y: 24}, {x: '8', y: 15}, {x: '9', y: 57}, {x: '10', y: 100}, {x: '11', y: 10}, {
                    x: '12',
                    y: 24
                }, {x: '13', y: 52}, {x: '14', y: 7}, {x: '15', y: 82}, {x: '16', y: 90},]
            },
            {
                name: "Oct",
                data: [{x: '1', y: 41}, {x: '2', y: 51}, {x: '3', y: 79}, {x: '4', y: 60}, {x: '5', y: 81}, {
                    x: '6',
                    y: 17
                }, {x: '7', y: 61}, {x: '8', y: 80}, {x: '9', y: 42}, {x: '10', y: 60}, {x: '11', y: 51}, {
                    x: '12',
                    y: 61
                }, {x: '13', y: 33}, {x: '14', y: 3}, {x: '15', y: 53}, {x: '16', y: 15},]
            },
            {
                name: "Nov",
                data: [{x: '1', y: 90}, {x: '2', y: 80}, {x: '3', y: 30}, {x: '4', y: 74}, {x: '5', y: 10}, {
                    x: '6',
                    y: 41
                }, {x: '7', y: 35}, {x: '8', y: 20}, {x: '9', y: 54}, {x: '10', y: 91}, {x: '11', y: 80}, {
                    x: '12',
                    y: 35
                }, {x: '13', y: 81}, {x: '14', y: 9}, {x: '15', y: 12}, {x: '16', y: 80},]
            },
            {
                name: "Dec",
                data: [{x: '1', y: 54}, {x: '2', y: 78}, {x: '3', y: 42}, {x: '4', y: 76}, {x: '5', y: 51}, {
                    x: '6',
                    y: 90
                }, {x: '7', y: 72}, {x: '8', y: 98}, {x: '9', y: 64}, {x: '10', y: 77}, {x: '11', y: 78}, {
                    x: '12',
                    y: 72
                }, {x: '13', y: 99}, {x: '14', y: 24}, {x: '15', y: 10}, {x: '16', y: 20},]
            },
        ],
        xaxis: {
            type: "category"
        }
    };
    (new ApexCharts(document.querySelector("#chart-heatmap-basic"), options)).render();

    var options = {
        chart: {
            height: 400,
            type: "heatmap",
            toolbar: {
                show: false,
            },
        },
        dataLabels: {
            enabled: false
        },
        colors: ["#206bc4", "#45aaf2", "#6574cd", "#a55eea", "#f66d9b", "#cd201f", "#ff922b", "#fab005", "#94d82d", "#5eba00", "#2bcbba", "#17a2b8",],
        series: [
            {
                name: "Jan",
                data: [{x: '1', y: 23}, {x: '2', y: 14}, {x: '3', y: 24}, {x: '4', y: 90}, {x: '5', y: 99}, {
                    x: '6',
                    y: 28
                }, {x: '7', y: 51}, {x: '8', y: 51}, {x: '9', y: 98}, {x: '10', y: 61}, {x: '11', y: 14}, {
                    x: '12',
                    y: 51
                }, {x: '13', y: 32}, {x: '14', y: 84}, {x: '15', y: 9}, {x: '16', y: 2},]
            },
            {
                name: "Feb",
                data: [{x: '1', y: 82}, {x: '2', y: 87}, {x: '3', y: 48}, {x: '4', y: 15}, {x: '5', y: 21}, {
                    x: '6',
                    y: 23
                }, {x: '7', y: 80}, {x: '8', y: 34}, {x: '9', y: 46}, {x: '10', y: 8}, {x: '11', y: 87}, {
                    x: '12',
                    y: 80
                }, {x: '13', y: 23}, {x: '14', y: 81}, {x: '15', y: 24}, {x: '16', y: 51},]
            },
            {
                name: "Mar",
                data: [{x: '1', y: 100}, {x: '2', y: 52}, {x: '3', y: 57}, {x: '4', y: 80}, {x: '5', y: 14}, {
                    x: '6',
                    y: 82
                }, {x: '7', y: 78}, {x: '8', y: 16}, {x: '9', y: 29}, {x: '10', y: 97}, {x: '11', y: 52}, {
                    x: '12',
                    y: 78
                }, {x: '13', y: 47}, {x: '14', y: 10}, {x: '15', y: 61}, {x: '16', y: 34},]
            },
            {
                name: "Apr",
                data: [{x: '1', y: 60}, {x: '2', y: 33}, {x: '3', y: 42}, {x: '4', y: 20}, {x: '5', y: 87}, {
                    x: '6',
                    y: 100
                }, {x: '7', y: 100}, {x: '8', y: 16}, {x: '9', y: 57}, {x: '10', y: 80}, {x: '11', y: 33}, {
                    x: '12',
                    y: 100
                }, {x: '13', y: 6}, {x: '14', y: 51}, {x: '15', y: 35}, {x: '16', y: 16},]
            },
            {
                name: "May",
                data: [{x: '1', y: 91}, {x: '2', y: 81}, {x: '3', y: 54}, {x: '4', y: 98}, {x: '5', y: 52}, {
                    x: '6',
                    y: 60
                }, {x: '7', y: 61}, {x: '8', y: 99}, {x: '9', y: 91}, {x: '10', y: 36}, {x: '11', y: 81}, {
                    x: '12',
                    y: 61
                }, {x: '13', y: 99}, {x: '14', y: 80}, {x: '15', y: 72}, {x: '16', y: 16},]
            },
            {
                name: "Jun",
                data: [{x: '1', y: 77}, {x: '2', y: 99}, {x: '3', y: 64}, {x: '4', y: 0}, {x: '5', y: 33}, {
                    x: '6',
                    y: 91
                }, {x: '7', y: 7}, {x: '8', y: 51}, {x: '9', y: 3}, {x: '10', y: 28}, {x: '11', y: 99}, {
                    x: '12',
                    y: 7
                }, {x: '13', y: 21}, {x: '14', y: 78}, {x: '15', y: 19}, {x: '16', y: 99},]
            },
            {
                name: "Jul",
                data: [{x: '1', y: 67}, {x: '2', y: 84}, {x: '3', y: 90}, {x: '4', y: 4}, {x: '5', y: 81}, {
                    x: '6',
                    y: 77
                }, {x: '7', y: 3}, {x: '8', y: 39}, {x: '9', y: 24}, {x: '10', y: 23}, {x: '11', y: 84}, {
                    x: '12',
                    y: 3
                }, {x: '13', y: 14}, {x: '14', y: 100}, {x: '15', y: 98}, {x: '16', y: 51},]
            },
            {
                name: "Aug",
                data: [{x: '1', y: 56}, {x: '2', y: 81}, {x: '3', y: 45}, {x: '4', y: 37}, {x: '5', y: 99}, {
                    x: '6',
                    y: 67
                }, {x: '7', y: 9}, {x: '8', y: 90}, {x: '9', y: 48}, {x: '10', y: 82}, {x: '11', y: 81}, {
                    x: '12',
                    y: 9
                }, {x: '13', y: 87}, {x: '14', y: 61}, {x: '15', y: 32}, {x: '16', y: 39},]
            },
            {
                name: "Sep",
                data: [{x: '1', y: 17}, {x: '2', y: 10}, {x: '3', y: 59}, {x: '4', y: 67}, {x: '5', y: 84}, {
                    x: '6',
                    y: 56
                }, {x: '7', y: 24}, {x: '8', y: 15}, {x: '9', y: 57}, {x: '10', y: 100}, {x: '11', y: 10}, {
                    x: '12',
                    y: 24
                }, {x: '13', y: 52}, {x: '14', y: 7}, {x: '15', y: 82}, {x: '16', y: 90},]
            },
            {
                name: "Oct",
                data: [{x: '1', y: 41}, {x: '2', y: 51}, {x: '3', y: 79}, {x: '4', y: 60}, {x: '5', y: 81}, {
                    x: '6',
                    y: 17
                }, {x: '7', y: 61}, {x: '8', y: 80}, {x: '9', y: 42}, {x: '10', y: 60}, {x: '11', y: 51}, {
                    x: '12',
                    y: 61
                }, {x: '13', y: 33}, {x: '14', y: 3}, {x: '15', y: 53}, {x: '16', y: 15},]
            },
            {
                name: "Nov",
                data: [{x: '1', y: 90}, {x: '2', y: 80}, {x: '3', y: 30}, {x: '4', y: 74}, {x: '5', y: 10}, {
                    x: '6',
                    y: 41
                }, {x: '7', y: 35}, {x: '8', y: 20}, {x: '9', y: 54}, {x: '10', y: 91}, {x: '11', y: 80}, {
                    x: '12',
                    y: 35
                }, {x: '13', y: 81}, {x: '14', y: 9}, {x: '15', y: 12}, {x: '16', y: 80},]
            },
            {
                name: "Dec",
                data: [{x: '1', y: 54}, {x: '2', y: 78}, {x: '3', y: 42}, {x: '4', y: 76}, {x: '5', y: 51}, {
                    x: '6',
                    y: 90
                }, {x: '7', y: 72}, {x: '8', y: 98}, {x: '9', y: 64}, {x: '10', y: 77}, {x: '11', y: 78}, {
                    x: '12',
                    y: 72
                }, {x: '13', y: 99}, {x: '14', y: 24}, {x: '15', y: 10}, {x: '16', y: 20},]
            },
        ],
        xaxis: {
            type: "category"
        }
    };
    (new ApexCharts(document.querySelector("#chart-heatmap-multiple"), options)).render();

    var options = {
        chart: {
            height: 400,
            type: "heatmap",
            toolbar: {
                show: false,
            },
        },
        dataLabels: {
            enabled: true
        },
        colors: ["#206bc4",],
        series: [
            {
                name: "Jan",
                data: [{x: '1', y: 23}, {x: '2', y: 14}, {x: '3', y: 24}, {x: '4', y: 90}, {x: '5', y: 99}, {
                    x: '6',
                    y: 28
                }, {x: '7', y: 51}, {x: '8', y: 51}, {x: '9', y: 98}, {x: '10', y: 61}, {x: '11', y: 14}, {
                    x: '12',
                    y: 51
                }, {x: '13', y: 32}, {x: '14', y: 84}, {x: '15', y: 9}, {x: '16', y: 2},]
            },
            {
                name: "Feb",
                data: [{x: '1', y: 82}, {x: '2', y: 87}, {x: '3', y: 48}, {x: '4', y: 15}, {x: '5', y: 21}, {
                    x: '6',
                    y: 23
                }, {x: '7', y: 80}, {x: '8', y: 34}, {x: '9', y: 46}, {x: '10', y: 8}, {x: '11', y: 87}, {
                    x: '12',
                    y: 80
                }, {x: '13', y: 23}, {x: '14', y: 81}, {x: '15', y: 24}, {x: '16', y: 51},]
            },
            {
                name: "Mar",
                data: [{x: '1', y: 100}, {x: '2', y: 52}, {x: '3', y: 57}, {x: '4', y: 80}, {x: '5', y: 14}, {
                    x: '6',
                    y: 82
                }, {x: '7', y: 78}, {x: '8', y: 16}, {x: '9', y: 29}, {x: '10', y: 97}, {x: '11', y: 52}, {
                    x: '12',
                    y: 78
                }, {x: '13', y: 47}, {x: '14', y: 10}, {x: '15', y: 61}, {x: '16', y: 34},]
            },
            {
                name: "Apr",
                data: [{x: '1', y: 60}, {x: '2', y: 33}, {x: '3', y: 42}, {x: '4', y: 20}, {x: '5', y: 87}, {
                    x: '6',
                    y: 100
                }, {x: '7', y: 100}, {x: '8', y: 16}, {x: '9', y: 57}, {x: '10', y: 80}, {x: '11', y: 33}, {
                    x: '12',
                    y: 100
                }, {x: '13', y: 6}, {x: '14', y: 51}, {x: '15', y: 35}, {x: '16', y: 16},]
            },
            {
                name: "May",
                data: [{x: '1', y: 91}, {x: '2', y: 81}, {x: '3', y: 54}, {x: '4', y: 98}, {x: '5', y: 52}, {
                    x: '6',
                    y: 60
                }, {x: '7', y: 61}, {x: '8', y: 99}, {x: '9', y: 91}, {x: '10', y: 36}, {x: '11', y: 81}, {
                    x: '12',
                    y: 61
                }, {x: '13', y: 99}, {x: '14', y: 80}, {x: '15', y: 72}, {x: '16', y: 16},]
            },
            {
                name: "Jun",
                data: [{x: '1', y: 77}, {x: '2', y: 99}, {x: '3', y: 64}, {x: '4', y: 0}, {x: '5', y: 33}, {
                    x: '6',
                    y: 91
                }, {x: '7', y: 7}, {x: '8', y: 51}, {x: '9', y: 3}, {x: '10', y: 28}, {x: '11', y: 99}, {
                    x: '12',
                    y: 7
                }, {x: '13', y: 21}, {x: '14', y: 78}, {x: '15', y: 19}, {x: '16', y: 99},]
            },
            {
                name: "Jul",
                data: [{x: '1', y: 67}, {x: '2', y: 84}, {x: '3', y: 90}, {x: '4', y: 4}, {x: '5', y: 81}, {
                    x: '6',
                    y: 77
                }, {x: '7', y: 3}, {x: '8', y: 39}, {x: '9', y: 24}, {x: '10', y: 23}, {x: '11', y: 84}, {
                    x: '12',
                    y: 3
                }, {x: '13', y: 14}, {x: '14', y: 100}, {x: '15', y: 98}, {x: '16', y: 51},]
            },
            {
                name: "Aug",
                data: [{x: '1', y: 56}, {x: '2', y: 81}, {x: '3', y: 45}, {x: '4', y: 37}, {x: '5', y: 99}, {
                    x: '6',
                    y: 67
                }, {x: '7', y: 9}, {x: '8', y: 90}, {x: '9', y: 48}, {x: '10', y: 82}, {x: '11', y: 81}, {
                    x: '12',
                    y: 9
                }, {x: '13', y: 87}, {x: '14', y: 61}, {x: '15', y: 32}, {x: '16', y: 39},]
            },
            {
                name: "Sep",
                data: [{x: '1', y: 17}, {x: '2', y: 10}, {x: '3', y: 59}, {x: '4', y: 67}, {x: '5', y: 84}, {
                    x: '6',
                    y: 56
                }, {x: '7', y: 24}, {x: '8', y: 15}, {x: '9', y: 57}, {x: '10', y: 100}, {x: '11', y: 10}, {
                    x: '12',
                    y: 24
                }, {x: '13', y: 52}, {x: '14', y: 7}, {x: '15', y: 82}, {x: '16', y: 90},]
            },
            {
                name: "Oct",
                data: [{x: '1', y: 41}, {x: '2', y: 51}, {x: '3', y: 79}, {x: '4', y: 60}, {x: '5', y: 81}, {
                    x: '6',
                    y: 17
                }, {x: '7', y: 61}, {x: '8', y: 80}, {x: '9', y: 42}, {x: '10', y: 60}, {x: '11', y: 51}, {
                    x: '12',
                    y: 61
                }, {x: '13', y: 33}, {x: '14', y: 3}, {x: '15', y: 53}, {x: '16', y: 15},]
            },
            {
                name: "Nov",
                data: [{x: '1', y: 90}, {x: '2', y: 80}, {x: '3', y: 30}, {x: '4', y: 74}, {x: '5', y: 10}, {
                    x: '6',
                    y: 41
                }, {x: '7', y: 35}, {x: '8', y: 20}, {x: '9', y: 54}, {x: '10', y: 91}, {x: '11', y: 80}, {
                    x: '12',
                    y: 35
                }, {x: '13', y: 81}, {x: '14', y: 9}, {x: '15', y: 12}, {x: '16', y: 80},]
            },
            {
                name: "Dec",
                data: [{x: '1', y: 54}, {x: '2', y: 78}, {x: '3', y: 42}, {x: '4', y: 76}, {x: '5', y: 51}, {
                    x: '6',
                    y: 90
                }, {x: '7', y: 72}, {x: '8', y: 98}, {x: '9', y: 64}, {x: '10', y: 77}, {x: '11', y: 78}, {
                    x: '12',
                    y: 72
                }, {x: '13', y: 99}, {x: '14', y: 24}, {x: '15', y: 10}, {x: '16', y: 20},]
            },
        ],
        xaxis: {
            type: "category"
        }
    };
    (new ApexCharts(document.querySelector("#chart-heatmap-labels"), options)).render();

    var options = {
        chart: {
            height: 400,
            type: "heatmap",
            toolbar: {
                show: false,
            },
        },
        dataLabels: {
            enabled: false
        },
        plotOptions: {
            heatmap: {
                enableShades: true,
                colorScale: {
                    ranges: [{
                        from: 0,
                        to: 20,
                        name: "Low",
                        color: "#5eba00"
                    }, {
                        from: 21,
                        to: 50,
                        name: "Medium",
                        color: "#206bc4"
                    }, {
                        from: 51,
                        to: 75,
                        name: "High",
                        color: "#fab005"
                    }, {
                        from: 76,
                        to: 100,
                        name: "Extreme",
                        color: "#cd201f"
                    }]
                }
            }
        },
        series: [
            {
                name: "Jan",
                data: [{x: '1', y: 23}, {x: '2', y: 14}, {x: '3', y: 24}, {x: '4', y: 90}, {x: '5', y: 99}, {
                    x: '6',
                    y: 28
                }, {x: '7', y: 51}, {x: '8', y: 51}, {x: '9', y: 98}, {x: '10', y: 61}, {x: '11', y: 14}, {
                    x: '12',
                    y: 51
                }, {x: '13', y: 32}, {x: '14', y: 84}, {x: '15', y: 9}, {x: '16', y: 2},]
            },
            {
                name: "Feb",
                data: [{x: '1', y: 82}, {x: '2', y: 87}, {x: '3', y: 48}, {x: '4', y: 15}, {x: '5', y: 21}, {
                    x: '6',
                    y: 23
                }, {x: '7', y: 80}, {x: '8', y: 34}, {x: '9', y: 46}, {x: '10', y: 8}, {x: '11', y: 87}, {
                    x: '12',
                    y: 80
                }, {x: '13', y: 23}, {x: '14', y: 81}, {x: '15', y: 24}, {x: '16', y: 51},]
            },
            {
                name: "Mar",
                data: [{x: '1', y: 100}, {x: '2', y: 52}, {x: '3', y: 57}, {x: '4', y: 80}, {x: '5', y: 14}, {
                    x: '6',
                    y: 82
                }, {x: '7', y: 78}, {x: '8', y: 16}, {x: '9', y: 29}, {x: '10', y: 97}, {x: '11', y: 52}, {
                    x: '12',
                    y: 78
                }, {x: '13', y: 47}, {x: '14', y: 10}, {x: '15', y: 61}, {x: '16', y: 34},]
            },
            {
                name: "Apr",
                data: [{x: '1', y: 60}, {x: '2', y: 33}, {x: '3', y: 42}, {x: '4', y: 20}, {x: '5', y: 87}, {
                    x: '6',
                    y: 100
                }, {x: '7', y: 100}, {x: '8', y: 16}, {x: '9', y: 57}, {x: '10', y: 80}, {x: '11', y: 33}, {
                    x: '12',
                    y: 100
                }, {x: '13', y: 6}, {x: '14', y: 51}, {x: '15', y: 35}, {x: '16', y: 16},]
            },
            {
                name: "May",
                data: [{x: '1', y: 91}, {x: '2', y: 81}, {x: '3', y: 54}, {x: '4', y: 98}, {x: '5', y: 52}, {
                    x: '6',
                    y: 60
                }, {x: '7', y: 61}, {x: '8', y: 99}, {x: '9', y: 91}, {x: '10', y: 36}, {x: '11', y: 81}, {
                    x: '12',
                    y: 61
                }, {x: '13', y: 99}, {x: '14', y: 80}, {x: '15', y: 72}, {x: '16', y: 16},]
            },
            {
                name: "Jun",
                data: [{x: '1', y: 77}, {x: '2', y: 99}, {x: '3', y: 64}, {x: '4', y: 0}, {x: '5', y: 33}, {
                    x: '6',
                    y: 91
                }, {x: '7', y: 7}, {x: '8', y: 51}, {x: '9', y: 3}, {x: '10', y: 28}, {x: '11', y: 99}, {
                    x: '12',
                    y: 7
                }, {x: '13', y: 21}, {x: '14', y: 78}, {x: '15', y: 19}, {x: '16', y: 99},]
            },
            {
                name: "Jul",
                data: [{x: '1', y: 67}, {x: '2', y: 84}, {x: '3', y: 90}, {x: '4', y: 4}, {x: '5', y: 81}, {
                    x: '6',
                    y: 77
                }, {x: '7', y: 3}, {x: '8', y: 39}, {x: '9', y: 24}, {x: '10', y: 23}, {x: '11', y: 84}, {
                    x: '12',
                    y: 3
                }, {x: '13', y: 14}, {x: '14', y: 100}, {x: '15', y: 98}, {x: '16', y: 51},]
            },
            {
                name: "Aug",
                data: [{x: '1', y: 56}, {x: '2', y: 81}, {x: '3', y: 45}, {x: '4', y: 37}, {x: '5', y: 99}, {
                    x: '6',
                    y: 67
                }, {x: '7', y: 9}, {x: '8', y: 90}, {x: '9', y: 48}, {x: '10', y: 82}, {x: '11', y: 81}, {
                    x: '12',
                    y: 9
                }, {x: '13', y: 87}, {x: '14', y: 61}, {x: '15', y: 32}, {x: '16', y: 39},]
            },
            {
                name: "Sep",
                data: [{x: '1', y: 17}, {x: '2', y: 10}, {x: '3', y: 59}, {x: '4', y: 67}, {x: '5', y: 84}, {
                    x: '6',
                    y: 56
                }, {x: '7', y: 24}, {x: '8', y: 15}, {x: '9', y: 57}, {x: '10', y: 100}, {x: '11', y: 10}, {
                    x: '12',
                    y: 24
                }, {x: '13', y: 52}, {x: '14', y: 7}, {x: '15', y: 82}, {x: '16', y: 90},]
            },
            {
                name: "Oct",
                data: [{x: '1', y: 41}, {x: '2', y: 51}, {x: '3', y: 79}, {x: '4', y: 60}, {x: '5', y: 81}, {
                    x: '6',
                    y: 17
                }, {x: '7', y: 61}, {x: '8', y: 80}, {x: '9', y: 42}, {x: '10', y: 60}, {x: '11', y: 51}, {
                    x: '12',
                    y: 61
                }, {x: '13', y: 33}, {x: '14', y: 3}, {x: '15', y: 53}, {x: '16', y: 15},]
            },
            {
                name: "Nov",
                data: [{x: '1', y: 90}, {x: '2', y: 80}, {x: '3', y: 30}, {x: '4', y: 74}, {x: '5', y: 10}, {
                    x: '6',
                    y: 41
                }, {x: '7', y: 35}, {x: '8', y: 20}, {x: '9', y: 54}, {x: '10', y: 91}, {x: '11', y: 80}, {
                    x: '12',
                    y: 35
                }, {x: '13', y: 81}, {x: '14', y: 9}, {x: '15', y: 12}, {x: '16', y: 80},]
            },
            {
                name: "Dec",
                data: [{x: '1', y: 54}, {x: '2', y: 78}, {x: '3', y: 42}, {x: '4', y: 76}, {x: '5', y: 51}, {
                    x: '6',
                    y: 90
                }, {x: '7', y: 72}, {x: '8', y: 98}, {x: '9', y: 64}, {x: '10', y: 77}, {x: '11', y: 78}, {
                    x: '12',
                    y: 72
                }, {x: '13', y: 99}, {x: '14', y: 24}, {x: '15', y: 10}, {x: '16', y: 20},]
            },
        ],
        xaxis: {
            type: "category"
        }
    };
    (new ApexCharts(document.querySelector("#chart-heatmap-colors"), options)).render();
</script>

<div class="container-xl">
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">
                    Heatmap Charts
                </h2>
            </div>
        </div>
    </div>
    <div class="row row-cards">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Basic Heatmap - Single Series</h4>
                    <div id="chart-heatmap-basic"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Heatmap - Multiple series</h4>
                    <div id="chart-heatmap-multiple"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Heatmap - Labels included</h4>
                    <div id="chart-heatmap-labels"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Heatmap - Color range</h4>
                    <div id="chart-heatmap-colors"></div>
                </div>
            </div>
        </div>
    </div>
</div>
